<script setup>
  import {ref,onMounted} from 'vue';
  import axios from 'axios'


  let msg = ref('');


  /**
   * 
   * 使用总结:
   *   1. 导入依赖 npm install axios 
   *   2. 直接引入 axios  import axios from 'axios'
   *   3. 发起异步请求 
   *      axios({参数:值})
   *      参数: url 请求地址  method 请求方式  params: {key:value} == ? key=value  data:{json} => put post请求 json数据
   *   https://www.axios-http.cn/docs/req_config
   */


  let sendAjax = ()=>{
    return axios(
     //请求的配置
      {
        method:"GET",
        url:"http://forum.atguigu.cn/api/rand.qinghua",
        params:{"format":"json"},
      }
    );
  }


  let change =async ()=>{
     let {data:{content}}  =  await sendAjax();
     msg.value = content;
  }

  onMounted(()=>{
    change();
  })

  //http异步请求
  // axios(
  //    //请求的配置
  //   {
  //      method:"GET",
  //      url:"http://forum.atguigu.cn/api/rand.qinghua?format=json"
  //   }
  // ).then((response)=>{
  //   //将返回的结果封装到json中 {data:接口的返回值,status:网络响应状态码}
  //   //console.log(JSON.stringify(data));
  //   msg.value = response.data.content;
  // }).catch((error)=>{
  //   console.log(error);
  // })

</script>

<template>
  <div>
     今日情话： {{ msg }}  <br>
     <button @click="change()">切换</button>
  </div>
</template>

<style scoped>

</style>